let value = 65.23;
let title = "数据";
let int = value.toFixed(2).split(".")[0];
let float = value.toFixed(2).split(".")[1];
let problemImg =
  "";
let gridImg =
  "";
option = {
  backgroundColor: "#02203d",
  title: {
    text: "{a|" + int + "}{b|." + float + "}\n{c|" + title + "}",
    x: "center",
    y: "center",
    textStyle: {
      rich: {
        a: {
          fontSize: 28,
          color: "#e4ff00",
          fontWeight: "600",
        },
        b: {
          fontSize: 20,
          color: "#e4ff00",
          padding: [0, 0, 14, 0],
        },
        c: {
          fontSize: 20,
          color: "#fff",
          padding: [5, 0],
        },
      },
    },
  },
  graphic: {
    elements: [
      {
        type: "image",
        zlevel: 10,
        style: {
          image: problemImg,
          width: 17,
          height: 16,
        },
        left: "46%",
        top: "60%",
      },
      {
        type: "image",
        z: 4,
        style: {
          image: gridImg,
          width: 17,
          height: 16,
        },
        left: "52%",
        top: "60%",
        onclick: function () {
          alert(1);
        },
      },
      {
        type: "image",
        z: 4,
        style: {
          image:
            "",
          width: 121,
          height: 120,
        },
        left: "center",
        top: "center",
        silent: true,
      },
      {
        type: "text",
        z: 4,
        style: {
          text: "查看详情",
          fill: "#fff",
        },
        left: "center",
        bottom: "11%",
      },

      {
        type: "rect",
        z: 4,
        style: {
          fill: "rgba(6,131,227,0.5)",
        },
        shape: {
          width: 92.92,
          height: 28.96,
          r: 3,
        },
        left: "center",
        bottom: "10%",
        onclick: function () {
          alert(1);
        },
      },
      {
        type: "text",
        z: 4,
        style: {
          text: "分子",
          fill: "rgba(230,230,230,0.8)",
          font: '15px "STHeiti", sans-serif',
        },
        silent: true,
        left: "center",
        bottom: "17%",
      },
      {
        type: "line",
        z: 4,
        style: {
          fill: "#3b4559",
          stroke: "#3b4559",
          lineWidth: 2,
        },
        shape: {
          x1: 295,
          y1: 0,
        },
        left: "center",
        bottom: "15%",
        silent: true,
      },
      {
        type: "text",
        z: 4,
        style: {
          text: "分母",
          fill: "rgba(230,230,230,0.8)",
          font: '15px "STHeiti", sans-serif',
        },
        silent: true,
        left: "center",
        bottom: "5%",
      },
    ],
  },
  series: [
    {
      type: "gauge",
      radius: "60%",
      clockwise: false,
      startAngle: "90",
      endAngle: "-269.9999",
      splitNumber: 40,
      detail: {
        offsetCenter: [0, -20],
        formatter: " ",
      },
      pointer: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: [
            [0, "#173c5e"],
            [
              36.7 / 100,
              new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#22beff",
                },
                {
                  offset: 0.3,
                  color: "#22baf8",
                },
                {
                  offset: 1,
                  color: "#173c5e",
                },
              ]),
            ],
            [1, "#173c5e"],
          ],
          width: 30,
          shadowColor: "rgba(33, 174, 234, 0)",
          shadowBlur: 0,
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        length: 30,
        lineStyle: {
          shadowBlur: 10,
          shadowColor: "rgba(0, 255, 255, 0)",
          shadowOffsetY: "0",
          color: "#020f18",
          width: 3,
        },
      },
      axisLabel: {
        show: false,
      },
    },

    {
      type: "pie",
      radius: ["44%", "48%"],
      hoverAnimation: false,
      clockWise: false,
      itemStyle: {
        normal: {
          color: "#0C355E",
        },
      },
      label: {
        show: false,
      },
      data: _dashed(),
    },

    // {
    //     type: 'pie',
    //     radius: [0, '40%'],
    //     hoverAnimation: false,
    //     clockWise: false,
    //     itemStyle: {
    //         normal: {
    //             shadowBlur: 0,
    //             shadowColor: '#000',
    //             color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
    //                 offset: 0,
    //                 color: '#1130dd',
    //             }, {
    //                 offset: 1,
    //                 color: '#0da6cd'
    //             }])
    //         }
    //     },
    //     label: {
    //         show: false
    //     },
    //     data: [0]
    // },
    {
      type: "pie",
      radius: ["70%", "71.5%"],
      hoverAnimation: false,
      clockWise: false,
      itemStyle: {
        normal: {
          shadowBlur: 20,
          shadowColor: "rgba(0, 118, 239,1)",
          color: "#0076EF",
        },
      },
      label: {
        show: false,
      },
      data: [100],
    },
    {
      type: "pie",
      radius: ["61%", "61.5%"],
      hoverAnimation: false,
      clockWise: false,
      itemStyle: {
        normal: {
          shadowBlur: 0,
          shadowColor: "rgba(0, 118, 239,0.5)",
          color: "#0076ef",
        },
      },
      label: {
        show: false,
      },
      data: [100],
    },
    {
      type: "pie",
      radius: ["68%", "69.5%"],
      hoverAnimation: false,
      clockWise: false,
      itemStyle: {
        normal: {
          shadowBlur: 0,
          shadowColor: "rgba(0, 255, 255,1)",
          color: "rgba(2, 33, 64,.6)",
        },
      },
      label: {
        show: false,
      },
      data: [100],
    },
  ],
};

function _dashed() {
  let dataArr = [];
  for (var i = 0; i < 100; i++) {
    if (i % 2 === 0) {
      dataArr.push({
        name: (i + 1).toString(),
        value: 10,
        itemStyle: {
          normal: {
            color: "rgb(0,118,239,0.5)",
          },
        },
      });
    } else {
      dataArr.push({
        name: (i + 1).toString(),
        value: 50,
        itemStyle: {
          normal: {
            color: "rgb(0,0,0,0)",
            borderWidth: 1,
            borderColor: "rgb(0,118,239,1)",
          },
        },
      });
    }
  }
  return dataArr;
}

function doing() {
  let option = myChart.getOption();
  option.series[1].startAngle = option.series[1].startAngle - 1;
  myChart.setOption(option);
}

function startTimer() {
  timer = setInterval(doing, 100);
}
setTimeout(startTimer, 0);
